<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page isELIgnored="false" %>

<html>
<head>

    <title>${goods.gname} - 商品详情</title>
    <style>
        .author-info {
            display: flex;
            align-items: center;
            margin-right: 20px;
        }
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        .video-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 比例 */
            height: 0;
            overflow: hidden;
            margin-bottom: 20px;
            background: #000;
            border-radius: 5px;
        }
        .video-container iframe,
        .video-container video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
        .goods-info {
            margin-top: 20px;
        }
        .goods-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        .meta-info {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 20px;
            color: #666;
        }
        .meta-item {
            display: flex;
            align-items: center;
        }
        .meta-item i {
            margin-right: 5px;
            color: #999;
        }
        .goods-desc {
            margin-top: 20px;
            padding: 15px;
            background: #f9f9f9;
            border-radius: 5px;
            line-height: 1.8;
        }
        .btn-back {
            display: inline-block;
            padding: 10px 20px;
            background: #4a90e2;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            transition: background 0.3s;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }
        .btn-back:hover {
            background: #3a7bc8;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>商品详情</h1>
        <a href="javascript:history.back()" class="btn-back">返回</a>
    </div>

    <!-- 视频展示区域 -->
    <div class="video-container">
        <c:choose>
            <c:when test="${not empty goodsDetail.video}">
                <!-- 如果是视频链接 -->
                <iframe src="${goodsDetail.video}" frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen></iframe>
            </c:when>
            <c:otherwise>
                <!-- 如果是上传的视频文件 -->
                <video controls>
                    <source src="${pageContext.request.contextPath}/uploads/${goodsDetail.video}" type="video/mp4">
                    您的浏览器不支持HTML5视频
                </video>
            </c:otherwise>
        </c:choose>
    </div>

    <!-- 商品信息 -->
    <div class="goods-info">
        <div class="author-info">
            <div class="book-card" onclick="window.location.href='${pageContext.request.contextPath}/teacher/homepage?uid=${teacher.uid}'">
            <img src="${teacher.icon}" style="width:30px;height:30px;border-radius:50%;">
            ${goodsDetail.author}
                </div>
        </div>
        <div class="goods-title">作品名字：${goodsDetail.gname}</div>

        <div class="meta-info">
            <div class="meta-item">
                <i class="far fa-user"></i> 作者：${goodsDetail.author}
            </div>
            <div class="meta-item">
                <i class="far fa-clock"></i> 时长：${goodsDetail.duration}分钟
            </div>
        </div>

        <div class="goods-desc">
            <h3>商品描述</h3>
            <p>${goodsDetail.describe1}</p>
        </div>
    </div>




    <h2>商品评论列表</h2>

    <!-- 添加成功/错误消息显示 -->
    <c:if test="${not empty success}">
        <div class="alert alert-success">${success}</div>
    </c:if>
    <c:if test="${not empty error}">
        <div class="alert alert-danger">${error}</div>
    </c:if>

    <form action="${pageContext.request.contextPath}/comment/add?gid=${goodsDetail.gid}" method="post">
        <input type="hidden" name="gid" value="${gid}">
        <textarea name="content" rows="4" cols="50" required placeholder="请输入评论内容"></textarea><br>
        <input type="submit" value="发表评论">
    </form>

    <h3>已有评论：</h3>

    <c:forEach items="${comments}" var="comment">
        <div style="border: 1px solid #ccc; margin: 10px 0; padding: 10px;">
            <p>${comment.user.icon}</p>
            <p>${comment.user.username}</p>
            <p>${comment.content}</p>
            <p style="font-size: 12px; color: #666;">
                评论时间：<fmt:formatDate value="${comment.ctime}" pattern="yyyy-MM-dd HH:mm"/>
            </p>
        </div>
    </c:forEach>

</div>
<!-- 使用Font Awesome图标 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</body>

</html>